<template>
  <div class="patrolTrend-root">
    <formTitleVue
      title="设备类型统计"
      :cascader="cascader_options"
    />
    <div class="select-ul">
      <el-cascader v-model="nowCascader" :options="cascader_options" @change="changeCascader"></el-cascader>
    </div>
    <!-- <div id="echarts-patrolTrend"></div> -->
    <myBarHorizontal domId="monitorInfoManagement-patrolTrend-echarts" height="40vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myBarHorizontal from '@/components/Echarts/myBarHorizontal.vue';
import { api_deviceStatisticsColumnar,api_cascader } from '@/api/jcfx/jcsjtj.js'

export default {
  name: "patrolTrend",
  components: {
    formTitleVue,myBarHorizontal,
  },
  data() {
    return {
      selectOptions: [
        // {
        //   selectValue: "近一月",
        //   options:[
        //     { label: "近一月", value: "近一月" },
        //     { label: "近半年", value: "近半年" },
        //     { label: "近一年", value: "近一年" },
        //   ]
        // }
      ],
      chartsData: {
        xData: [],
        yData: [],
      },
      echartsOption:{
        legend:{
          show:false,
        },
        yAxis: {
          data: []
        },
        grid: {
          left: '20%',
        },
      },
      searChForm: {
        bModeType: 'ALARM_RQL,ALARM_GSL,ALARM_PSL,ALARM_ZHGLL,ALARM_HWL',
        modeType: 'ALARM_RQL',
        areaCode: this.$store.state.account.user.deptIds,
      },
      cascader_options:[],
      // cascader_options: {
      //   data: [],
      //   changeFn: this.changeCascader,
      // },
      nowCascader: ['ALARM_RQL,ALARM_GSL,ALARM_PSL,ALARM_ZHGLL,ALARM_HWL','ALARM_RQL'],
    };
  },
  methods: {
    getData() {
      // console.log(this.searChForm)
      api_deviceStatisticsColumnar(this.searChForm).then(res => {
        // console.log(res)
        let data = res.data
        this.echartsOption.yAxis.data = data.xAxle
        // let xData = []
        // data.xAxle.forEach((item,index) => {
        //   data.data.find((item2,index2) => {
        //     let key = Object.keys(item2)[0]
        //     // console.log(key)
        //     if(key == item){
        //       xData.push(item2[key][0])
        //       return true
        //     }
        //   })
        //   // console.log(data1)
        // })
        data.data.forEach(item => {
          item.data = item.report
        });
        this.chartsData.xData = data.data
        // console.log(this.chartsData.xData)
      })
    },
    // 获取级联数据下拉框
    async getCascader(){
      await api_cascader({type:'twoType'}).then(res => {
        // console.log(res)
        // 去掉级联中的全部---------开始
        let noAllArr = []
        noAllArr = res.data.filter(item => {
          if(item.label.indexOf('全部') == -1){
            return true
          }else{
            return false
          }
        })
        res.data.forEach(item => {
          if(item.children){
            item.children = item.children.filter(item2 => {
              if(item2.label.indexOf('全部') == -1){
                return true
              }else{
                return false
              }
            })
          }
        })
        // 去掉级联中的全部---------结束
        this.cascader_options = noAllArr
        console.log(this.cascader_options)

        return Promise.resolve()
      })
    },
    // 级联选择
    changeCascader(val){
      console.log(val)
      this.searChForm.bModeType = val[0]||''
      this.searChForm.modeType = val[1]||''
      this.getData()
    }
  },
  async mounted() {
    // this.selectChange(this.selectOptions[0].selectValue)
    await this.getCascader()
    this.getData()
  },
};
</script>

<style lang="scss" scoped>
.patrolTrend-root {
  position: relative;
  #echarts-patrolTrend {
    height: 30vh;
  }
  .select-ul{
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 10;
  }
}
::v-deep .el-cascader{
  line-height: initial;
}
</style>
